<template>
	<view class="center">
		
		<hea-ders title="筛选">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<!-- <view class="ima" @click="Sizer"> -->
				<text slot="official">重置</text>
			<!-- </view> -->
		</hea-ders>
		<!-- 列表 -->
		<uni-collapse accordion="true" class="screen">
			<uni-collapse-item title="客户等级" class="screen_one">
				<view class="screen_ones" @click="change('0')">
					<view class="screen_three">
						<text>批发客户</text>
					</view>
					<image v-show="'0' == titles " src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones"  @click="change('1')">
					<view class="screen_three">
						<text>零售客户</text>
					</view>
					<image v-show="'1' == titles " src="../../../static/images/1333.png" mode=""></image>
				</view>
			</uni-collapse-item>
		
			<uni-collapse-item title="未跟进时间"class="screen_one">
				<view class="screen_ones"  @click="list('0')">
					<view class="screen_three">
						<text>全部</text>
					</view>
					<image v-show="'0' == coucct" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="list('1')">
					<view class="screen_three">
						<text>3天未跟进</text>
					</view>
					<image v-show="'1' == coucct" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="list('2')">
					<view class="screen_three">
						<text>3-7天未跟进</text>
					</view>
					<image v-show="'2' == coucct" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="list('3')">
					<view class="screen_three">
						<text>7-15天未跟进</text>
					</view>
					<image v-show="'3' == coucct" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="list('4')">
					<view class="screen_three">
						<text>15-30天未跟进</text>
					</view>
					<image v-show="'4' == coucct" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="list('5')">
					<view class="screen_three">
						<text>大于30天未跟进</text>
					</view>
					<image v-show="'5' == coucct" src="../../../static/images/1333.png" mode=""></image>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="未交易时间" class="screen_one">
				<view class="screen_ones"  @click="listDate('0')">
					<view class="screen_three">
						<text>全部</text>
					</view>
					<image v-show="'0' == coucc" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="listDate('1')">
					<view class="screen_three">
						<text>3天未跟进</text>
					</view>
					<image v-show="'1' == coucc" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="listDate('2')">
					<view class="screen_three">
						<text>3-7天未跟进</text>
					</view>
					<image v-show="'2' == coucc" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="listDate('3')">
					<view class="screen_three">
						<text>7-15天未跟进</text>
					</view>
					<image v-show="'3' == coucc" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="listDate('4')">
					<view class="screen_three">
						<text>15-30天未跟进</text>
					</view>
					<image v-show="'4' == coucc" src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="listDate('5')">
					<view class="screen_three">
						<text>大于30天未跟进</text>
					</view>
					<image v-show="'5' == coucc" src="../../../static/images/1333.png" mode=""></image>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 底部 -->
		<view class="foot">
			<button type="default">确定</button>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			uniSection,
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem,
			heaDers
		},
		data() {
			return{
				titles:0,
				coucct:0,
				coucc:0
			} 

		},
		methods: {
			change(index) {
			this.titles = index
			},
			list(index){
				console.log(index)
				this.coucct = index
			},
			listDate(index){
				console.log(index)
				this.coucc = index
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	.center {
		background: #F5F5F5;
		height: 100%;
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			image {
			
				width: 22rpx;
			}
		
			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}
		
			.ima {
				text {
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:500;
					line-height:33rpx;
					color:rgba(255,255,255,1);
					opacity:1;
				}
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}
		.screen{
			background: #fff;
			
		}
		
		.screen_one{
			width: 100%;
			background: #fff;
			border-bottom: 10px solid #F5F5F5;
			padding-bottom: 10rpx;
			position: relative;
			.screen_three {
				height: 88rpx;
				font-size: 28rpx;
				color: #9e9e9e;
				border-bottom: 1px solid #F5F5F5;
				line-height: 88rpx;
				width: 100%;
				text-align: center;
				background: #FCFCFC;
			}
			.screen_ones{
				
				display: flex;
				text{
					text-align: center;
				}
			}
			image{
				width: 88rpx;
				height: 88rpx;
				position: absolute;
				left: 89%;
			}
		}
		// 底部
		.foot {
			position: absolute;
			bottom: 0%;
			width: 100%;
			height: 88rpx;
		
			button {
				background: #2399F6;
				color: #fff;
				font-size: 28rpx;
				border-radius: 0;
				height: 88rpx;
				line-height: 88rpx;
			}
		}
		
	}


	
</style>
